<template>
  <div class="login-bg">
    <div class="login-main">
        <Account />
    </div>
  </div>
</template>

<script setup lang="ts">


import { defineAsyncComponent } from 'vue';
import {getTitle} from "@/util/util";
const Account = defineAsyncComponent(() => import('@/views/login/component/account.vue'));
</script>

<style scoped lang="scss">
.login-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(120deg, #c8d6e6 0%, #90c2f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 20px;
  //box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
  padding: 50px 50px;
  min-width: 400px;
  min-height: 380px;
  gap: 64px;
}
@media (max-width: 900px) {
  .login-main {
    flex-direction: column;
    min-width: 320px;
    gap: 24px;
    padding: 32px 8px;
  }
  .login-form-card {
    min-width: 0;
    width: 100%;
  }
}
</style>
